import { StatusBar } from 'expo-status-bar';
import { StyleSheet,TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';

const ImageBG = ({ style, source, children }) => {
    return <View style={style}>
        <Image style={[style, { position: 'absolute' }]} source={source} />
        {children}
    </View>
}

export default function App() {
    const uri = 'https://facebook.github.io/react-native/img/tiny_logo.png'
    return (
        <View style={styles.container}>
            <ScrollView>
                <Button
                    onPress={()=>{}}
                    title="按钮"
                    color="#841584"
                />
                <TouchableOpacity
                    style={{
                        width: 200,
                        height: 40,
                        backgroundColor: '#f00',
                        borderRadius: 20,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <Text style={{color: '#fff'}}>按钮</Text>
                </TouchableOpacity>
                {/* <Btn style={{}}>
                    按钮
                </Btn> */}
                <Text style={{ color: '#00f', textAlign: 'center' }}>
                    hello
                    <Text style={{ color: '#f00' }}>今天是周三</Text>
                    <Text>过了周三就是礼拜天</Text>
                </Text>
                <Image
                    style={{ width: 200, height: 100 }}
                    source={require('./assets/s1.jpg')}
                />
                <Image
                    style={{ width: 200, height: 100 }}
                    source={{
                        uri
                    }}
                />
                <Image
                    style={{ width: 200, height: 100 }}
                    source={{
                        uri
                    }}
                />
                <Image
                    style={{ width: 200, height: 100 }}
                    source={{
                        uri
                    }}
                />
                <Image
                    style={{ width: 200, height: 100 }}
                    source={{
                        uri
                    }}
                />
                <ImageBackground
                    style={{ width: 200, height: 200 }}
                    source={require('./assets/icon.png')}
                >
                    <Text style={{ color: '#f00', fontSize: 30 }}>hello</Text>
                </ImageBackground>

                <ImageBG
                    style={{ width: 200, height: 200 }}
                    source={require('./assets/icon.png')}
                >
                    <Text style={{ color: '#f00', fontSize: 30 }}>hello</Text>
                </ImageBG>
                <ImageBG
                    style={{ width: 200, height: 200 }}
                    source={require('./assets/icon.png')}
                >
                    <Text style={{ color: '#f00', fontSize: 30 }}>hello</Text>
                </ImageBG>
            </ScrollView>

            <StatusBar style="auto" />
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 30,
        backgroundColor: '#ccc'
    }
});
